window.vuecom_slider={
  template:`
    <div 
      class="process-wrapper" 
      @mousedown="mdHandle"
      @mouseup="muHandle"
    >
      <div class="process" :style="{'width':value*100+'%'}" ></div>
    </div>  
  `,
  props:{
    value:{
      type:[Number,String],
      default:0
    }
  },
  data(){
    return {
      flag:false
    }
  },
  methods:{
    mdHandle(){
      this.flag=true
      let dom=event.target
      let precent
      precent=(event.pageX-dom.offsetLeft)/dom.offsetWidth
      window.onmousemove=()=>{
        if (this.flag){
          precent=(event.pageX-dom.offsetLeft)/dom.offsetWidth
          if (precent>1){
            precent=1
          }
          if (precent<0){
            precent=0
          }
          this.$emit('update:value',precent)
        }
      }

      window.onmouseup=()=>{
        window.onmousemove=null
        this.flag=false
      }
    },
    muHandle(){
      let dom=event.target
      precent=(event.pageX-dom.offsetLeft)/dom.offsetWidth
      this.$emit('update:value',precent)
      window.onmousemove=null
      this.flag=false
    }
  }
}